<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <meta charset="UTF-8">
    <title>database-export</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../../../static/assetss/images/fav.png" th:href="@{/assetss/images/fav.png}">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../static/element-ui/element-ui.css" th:href="@{/element-ui/element-ui.css}">
    <link rel="stylesheet" href="../../../static/css/index2.css" th:href="@{/css/index2.css}">
    <script th:inline="javascript">
        /*<![CDATA[*/
        var ctx = [[@{/}]];
    </script>
    <!-- 引入组件库 -->
    <script src="../../../static/vue/vue.v2.6.10.js" th:src="@{/vue/vue.v2.6.10.js}"></script>
    <script src="../../../static/vue/axios.v0.19.0.min.js" th:src="@{/vue/axios.v0.19.0.min.js}"></script>
    <script src="../../../static/element-ui/element-ui.js" th:src="@{/element-ui/element-ui.js}"></script>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="icon-img">
                <img v-bind:src="iconUrl">
            </div>
            <div class="icon-text">
                <h1 class="icon-title">{{iconTitle}}</h1>
                <h5 class="icon-notes">{{iconNotes}}</h5>
            </div>
        </div>
        <div class="body">
            <div class="body_side_bar">
                <div class="sql-kind-div" v-bind:style="welcomeBarStyle" @click="barClick('welcome')">
                    <img class="bar-icon" v-bind:src="welcomeIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="oracleBarStyle" @click="barClick('oracle')">
                    <img class="bar-icon" v-bind:src="oracleIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="mysqlBarStyle" @click="barClick('mysql')">
                    <img class="bar-icon" v-bind:src="mysqlIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="sqlServerBarStyle" @click="barClick('sqlserver')">
                    <img class="bar-icon" v-bind:src="sqlserverIconImg" />
                </div>
                <div class="sql-kind-div" v-bind:style="postgresqlBarStyle" @click="barClick('postgresql')">
                    <img class="bar-icon" v-bind:src="postgresqlIconImg" />
                </div>
            </div>
            <div class="body_content" v-loading="loading" element-loading-text="拼命生成中...请勿刷新网页,如果表多,可能需要等待几分钟" element-loading-background="rgba(242,246,252, 0.8)">
                <div v-bind:style="contentStyle" v-show="welcomeDivShow">
                    <div style="padding-top: 2rem">
                        <span style="font-size: 25px">database-export是一款能生成数据库结构文档工具</span><br>
                        <br/>
                        <br/>
                        <span style="font-size: 20px">能支持最新的数据库版本，可以导出支持office2007版本以上的docx格式的文档</span>
                        <br/>
                        <span style="font-size: 20px">也可以导出excel，支持xlsx，也可以直接在浏览器预览</span>
                        <br/>
                        <br/>
                        <span style="font-size: 20px">如果有问题,可以去GitHub上提交issue，或微信联系我</span>
                        <br/>
                        <span style="font-size: 20px">想要进技术群加我微信，点击下面的微信图标加我</span>
                    </div>
                    <div style="padding-top: 10%">
                        <a title="Gitee" target="_blank" href="https://gitee.com/pomz/database-export" >
                            <img v-bind:src="giteeIconImg" style="width: 80px;height: 80px;margin-left: 30px;" />
                        </a>
                        <a title="GitHub" target="_blank" href="https://github.com/PomZWJ/database-export/" >
                            <img v-bind:src="githubIconImg" style="width: 80px;height: 80px;margin-left: 30px;" />
                        </a>
                        <a title="给我发邮件吧" target="_blank" href="mailto:1513041820@qq.com" style="display: none;">
                            <img v-bind:src="emailIconImg" style="width: 88px;height: 88px;margin-left: 30px;" />
                        </a>
                        <a title="微信">
                            <img v-bind:src="weChatIconImg" @click="openMyWxQr" style="width: 108px;height: 88px;margin-left: 30px;"  />
                        </a>
                    </div>
                    <div style="margin-top: 60px">
                        <span>Copyright © PomZWJ XiaMen 2018~2022</span>
                    </div>

                </div>
                <div v-bind:style="contentStyle" v-show="oracleDivShow" style="display: none;">
                    <el-image src="oracle-bg.png" th:src="@{/assetss/images/v2/oracle-bg.png}" :fit="fit" style="width: 190px;height:110px;"></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="o_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto;">
                            <el-popover placement="top" width="200" v-model="oraclePopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('oracle','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('oracle','excel')">excel</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('oracle')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>

                <div v-bind:style="contentStyle" v-show="mysqlDivShow" style="display: none;">
                    <el-image src="mysql-bg.png" th:src="@{/assetss/images/v2/mysql-bg.png}" :fit="fit" style="width: 110px;height:110px;"></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="m_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="200" v-model="mysqlPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('mysql','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('mysql','excel')">excel</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('mysql')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
                <div v-bind:style="contentStyle" v-show="sqlserverDivShow" style="display: none;">
                    <el-image src="sqlserver-bg.png" th:src="@{/assetss/images/v2/sqlserver-bg.png}" :fit="fit" style="width: 306.8px;height:80px;;padding-top: 30px" ></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="s_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="200" v-model="sqlserverPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('sqlserver','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('sqlserver','excel')">excel</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('sqlserver')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
                <div v-bind:style="contentStyle" v-show="postgresqlDivShow" style="display: none;">
                    <el-image src="sqlserver-bg.png" th:src="@{/assetss/images/v2/postgresql-bg.png}" :fit="fit" style="width: 306.8px;height:80px;;padding-top: 30px" ></el-image>
                    <el-form label-width="250px" style="width: 90%;padding-left: 10%;padding-top: 20px">
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_ip" placeholder="127.0.0.1" clearable>
                                    <template style="width: 200px;" slot="prepend">IP地址</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_port" clearable>
                                    <template slot="prepend">端&nbsp;&nbsp;&nbsp;口</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_dataname" clearable>
                                    <template slot="prepend">数据库</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_username" clearable>
                                    <template slot="prepend">用户名</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 20px;">
                            <el-col :span="20">
                                <el-input v-model="postgresql_password" clearable>
                                    <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 0 auto">
                            <el-popover placement="top" width="200" v-model="postgresqlPopoverVisible">
                                <el-row>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('postgresql','word')">word</el-button>
                                    <el-button class="el-icon-download" type="primary" plain @click="generateWord('postgresql','excel')">excel</el-button>
                                </el-row>
                                <el-button class="el-icon-download" slot="reference">生成文档</el-button>
                            </el-popover>
                            <el-button class="el-icon-view" @click="generateDocHtml('postgresql')">HTML预览</el-button>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../../static/js/index2.js" th:src="@{/js/index2.js}"></script>
</html>